<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选项卡</title>
    <style>
      #div1 button {
        width: 100px;
        height: 30px;
        background-color: gray;
        font-size: 16px;
        color: white;
      }
      #div1 div {
        width: 350px;
        height: 350px;
        background-color: gray;
        border: 1px solid black;
        display: none;
      }
      #div1 .active {
        background-color: orange;
        color: blue;
      }
    </style>
    <script>
      window.onload = function () {
        var oDiv = document.getElementById("div1");
        var aBtns = oDiv.getElementsByTagName("button");
        var aDivs= oDiv.getElementsByTagName("div");

        //通过循环添加点击事件
        for (var i = 0; i < aBtns.length; i++) {
          //添加自定义属性，记录当前按钮的下标
          aBtns[i].index = i;
          aBtns[i].onclick = function () {
            //清除按钮所有样式，将div隐藏
            for (var j = 0; j < aBtns.length; j++) {
              aBtns[j].className = "";
              aDivs[j].style.display = "none";
            }

            //将当前点击的按钮变成被选中的
            this.className = "active";
            aDivs[this.index].style.display = "block";
          };
        }
      };
    </script>
  </head>
  <body>
    <div id="div1">
      <button class="active">HTML</button>
      <button>JavaScript</button>
      <button>JQuery</button>
      <div style="display: block;">
        HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
      </div>
      <div>
        JavaScript（简称“JS”）
        是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript
        基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
      </div>
      <div>
        jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
      </div>
    </div>
  </body>
</html>
